<template>
  <div>
    <div>{{ data.global.name || "" }}</div>
    <div @click="getTers">获取getters{{ store.state.sumNum }}</div>
    <div @click="getMutations">获取mutations{{ store.state.sumNum }}</div>
    <div @click="getactions">获取actions</div>
    <br />
    <naVs :fatherMessage="fatherMessage" ref="RefChild" />
    <div @click="cklChild" @sayHello="handle">点击子组件</div>
  </div>
</template>

<script setup lang="ts" name="noRet">
import {
  ref,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  watch,
  watchEffect,
  computed,
  shallowReactive,
  defineAsyncComponent,
  shallowRef,
} from "vue";
import { useStore, mapState } from "vuex";
import { useRoute, useRouter } from "vue-router";
const naVs = defineAsyncComponent(() => import("./components/noRetNav.vue"));

const fatherMessage = ref("我是父组件的值");
// const fatherMessage = ref("我是父组件的值");
/**
 * 仓库
 */
const store = useStore();
let getTers = () => {
  console.log("getters", store.getters.getSum);
};

let getMutations = () => {
  store.commit("add", 4);
  console.log("getMutations");
};

let getactions = () => {
  console.log("getactions", store.dispatch("addAsync", 2));
};
/**
 * 路由对象
 */
const route = useRoute();
// console.log(route);
/**
 * 路由实例
 */
const router = useRouter();
// console.log(router);
//console.log('1-开始创建组件-setup')
/**
 * 数据部分
 */
const data = reactive({
  store,
  global: {
    name: "小王",
  },
});
watchEffect(
  () => {
    // console.log(data.global);
  },
  {
    flush: "post",
  }
);
onBeforeMount(() => {
  //   console.log("2.组件挂载页面之前执行----onBeforeMount");
});
onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
});
watchEffect(() => {});

let cklChild = () => {
  const RefChild = ref();
  console.log(RefChild.value);
};

const handle = () => {
  console.log("子组件调用了父组件的方法");
};
// 使用toRefs解构
// let { } = { ...toRefs(data) }
</script>
<style scoped lang='less'>
</style>